iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 16
0
Modern Web

JavaScript 從零開始系列 第 16

JavaScript 從零開始 - Day16 - Object & Array 物件與陣列的綜合應用

  • 分享至 

  • xImage
  •  

JavaScript Note

本篇記錄物件與陣列的綜合應用,會使用到以下內容,順便複習一下寫法:

變數 var

var a = 1;

函式 function

function name(params) {}

陣列 array

var array = [0, 1, 2],

物件 object

var object = {
  text: "string",
  number: 10,
};

物件 + 函式

物件內建立函式,可以透過函式的功能來做運算,讓物件成為一系列的內容,會相當好用。
以一個家庭為例,程式碼如下:

var home = {
  dad: "Tim",
  mom: "Min",
  son: ["Joshua", "John"],
  chair: 4,
  table: 3,
};

如果要在物件內加入函式,若要顯示:「Tim,該吃晚餐囉!」可以這樣寫:

var home = {
  dad: "Tim",
  mom: "Min",
  son: ["Joshua", "John"],
  chair: 4,
  table: 3,
  dinner: function () {
    //建立函式
    console.log(home.dad + ",該吃晚餐囉!"); //函式執行內容
  },
};

home.dinner(); //執行物件 home 裡面的函式 dinner 的內容

就會得到 Tim,該吃晚餐囉!的結果


存取物件中函式資料

倘若今天要計算物件裡面桌子椅子的總數量,可以在物件中建立另一個函式,做為計算的功能,可以這樣寫:

var home = {
  dad: "Tim",
  mom: "Min",
  son: ["Joshua", "John"],
  chair: 4,
  table: 3,
  dinner: function () {
    //建立函式
    console.log(home.dad + ",該吃晚餐囉!"); //函式執行內容
  }, //新增新物件要用逗點隔開
  furniture: function () {
    var furnitureNum = home.chair + home.table; //增加一個區域變數,把物件中的要抓取的屬性放進來
    console.log(furnitureNum); //執行函式中的區域變數內容
  },
};

home.dinner(); //執行物件 home 裡面的函式 dinner 的內容 ()
home.furnitureNum(); //執行物件 home 裡面的函式中的區域變數,結果會得到 7

陣列 + 物件

可以利用陣列整合資料的觀念,把物件變成陣列資料,如果今天有兩個家庭為例,程式碼會如下:

var homes = [
  {
    dad: "Tim",
    mom: "Min",
    son: ["Joshua", "John"],
    chair: 4,
    table: 3,
  },
  {
    dad: "Jerry",
    mom: "Nancy",
    son: ["Ethan", "Elijah", "Emma"],
    chair: 5,
    table: 4,
  },
];

因為是物件,所以在大括號中間還是要用逗號隔開
陣列中加入物件,物件前面就不用再寫一個變數名稱,因為直接在陣列裡面變成資料了


存取陣列中的物件資料

延續上方程式碼,今天要存取物件資料的寫法如下:

var homes = [
  {
    dad: "Tim",
    mom: "Min",
    son: ["Joshua", "John"],
    chair: 4,
    table: 3,
  },
  {
    dad: "Jerry",
    mom: "Nancy",
    son: ["Ethan", "Elijah", "Emma"],
    chair: 5,
    table: 4,
  },
];

console.log(homes[0].dad);
//會找到陣列中第一筆物件的資料,再找到裡面的 dad 的值,結果會是 Tim
console.log(homes[1].son[2]);
//會找到陣列中第二筆物件的資料,再找到裡面的 son 的第三個值,結果會是 Elijah

心得

  1. 要把變數、函式、陣列、物件四個寫法搞清楚。
  2. 因為四個東西有相關聯,要把不同的存取方法搞清楚,也要把彼此程式綜合應用時讀取的方式也要搞清楚,
  3. 存取資料的方法要想得直覺一點,不要想得太複雜,不然會卡關。
  4. 這一篇要連同前面的單元重複複習幾次,要熟悉。

上一篇
JavaScript 從零開始 - Day15 - Object 物件的基本認識
下一篇
JavaScript 從零開始 - Day17 - 控制判斷 (比較運算子、邏輯運算子)
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言